import React from 'react';
import store from '../store';
/**
 * 组件和仓库如何关联
 * 1. 输入  组件可以读取仓库中的状态进行渲染和显示
 * 2. 输出  组件里可以派发动作从而修改仓库中的状态
 */
export default class Counter extends React.Component {
  state = {value: store.getState().counter1.num}
  componentDidMount(){
    this.unsubscribe = store.subscribe(()=>{
      this.setState({value:store.getState().counter1.num})
    })
  }
  componentWillUnmount(){
    this.unsubscribe();
  }
  handleAdd = ()=>{
    store.dispatch({type: 'ADD1'})
  }

  render(){
    return <>
    <p>{this.state.value}</p>
    <button onClick={this.handleAdd}>+</button>
    <button onClick={()=>{store.dispatch({type: 'MINUS1'})}}>-</button>
    </>
  }
}